<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>课工场论坛列表</title>
    <script>
               function fatie() {
                    var d=document.getElementById("neirong");
                    d.style.display="block";
               }

               function fabu() {
                   var d=document.getElementById("postList");

                   var  l1=document.createElement("li");
                   var div1=document.createElement("div");
                   var img1=document.createElement("img");
                   var h=document.createElement("h1");
                   var  p1=document.createElement("p");
                   var  s1=document.createElement("span");
                   var s2=document.createElement("span");

                    d.appendChild(l1);
                    l1.appendChild(div1);
                    div1.appendChild(img1);
                    l1.appendChild(h);
                    l1.appendChild(p1);
                    p1.appendChild(s1);
                    p1.appendChild(s2);

                    //获得标题内容
                   var biaoti=document.getElementById("neirong").firstElementChild.value;
                   h.innerHTML=biaoti;//内容给标题

                   //获得随机头像
                    var imgSrc="../jsImage/tou0"+parseInt(Math.random()*4+1)+".jpg";
                    img1.src=imgSrc;

                    //获取板块
                   var  ban=document.getElementById("neirong").firstElementChild.nextElementSibling.value;
                   s1.innerHTML=ban;

                   //发表时间
                   var date=new Date();
                   s2.innerHTML=date;

                  var k=document.getElementById("neirong");
                  k.style.display="none";
               }
    </script>
    <link href="../jsImage/bbs.css" rel="stylesheet">
</head>
<body>
<div class="bbs">
    <header  id="h" onclick="fatie()"><span>我要发帖</span></header>
    <section>
        <ul id="postList">
            <li>
                <div><img src="../jsImage/tou02.jpg"></div>
                <h1>ggggg</h1>
                <p><span>版块：新手报到</span><span>发表时间：2019-11-18 17:28</span></p></li>
            <li>
                <div>
                    <img src="../jsImage/tou01.jpg"></div>
                <h1>ddddd</h1>
                <p><span>版块：新课来了</span><span>发表时间：2019-11-18 17:27</span></p>
            </li>
        </ul>
    </section>

    <div class="post" id="neirong">
        <input class="title" placeholder="请输入标题（1-50个字符）">
        所属版块：<select>
        <option>请选择版块</option>
        <option>电子书籍</option>
        <option>新课来了</option>
        <option>新手报到</option>
        <option>职业规划</option>
    </select>
        <textarea class="content"></textarea>
        <input class="btn" value="发布" onclick="fabu()">
    </div>
</div>
</body>
</html>